<style scoped>
    .wraper {
        padding: 0 20px;
    }

    .search {
        padding-bottom: 20px;
    }

    .search span {
        color: #68777c;
        font-weight: bold;
        padding-right: 18px;
    }

    .search button {
        background-color: #00a8f7;
        color: #fff;
        margin-left: 8px;
    }

    .top {
        margin-bottom: 20px;
        border-top: 1px dashed #cccccc;
    }


    .wraper .headline {
        position: relative;
        font-size: 12px;
        color: #303134;
        font-weight: bold;
        margin: 10px 0;
        line-height: 32px;
    }

    .wraper .add-agent {
        position: absolute;
        top: 0px;
        right: 30px;
        background-color: #348bf2;
        color: #fff;
    }

    .iconfont {
        font-size: 14px;
    }

    .red-font {
        color: #ff1f1f;
    }




    .fixed-bottom {
        padding-left: 20px;
        padding-right: 20px;
        height: 80px;
        line-height: normal !important;
        position: fixed;
        left: 210px;
        right: 0;
        bottom: 0;
        z-index: 999;
        text-align: center;
        background-color: rgb(255, 255, 255);
        box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
    }

    .sidehide {
        left: 75px;
    }


    /* 表格样式 start*/

    .pro-card {
        margin-bottom: 10px;
    }

    .pro-card-head {
        background-color: #e6e7eb;
        line-height: 38px;
        border: 1px solid #ddd;
    }

    .pro-card-title {
        font-size: 14px;
        color: #333;
        font-weight: bold;
        padding-left: 20px;
    }

    .pro-card-headr {
        padding-right: 10px;
        text-align: right;
    }

    .pro-card-content {
        clear: both;
    }

    .pro-paramname {
        text-align: center;
        background-color: #e6e7eb;
        font-size: 14px;
        color: #333;
        border-right: 1px solid #ddd;
    }

    .pro-paramvalue {
        padding-left: 10px;
        border-right: 1px solid #ddd;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .pro-card-contentrow {
        line-height: 40px;
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }






    /* 表格样式  end */

    /* 分页 start */

    .page {
        margin: 0;
    }

    .ivu-page {
        padding-bottom: 150px;
    }




    table {
        width: 1200px;
        margin: auto;
    }

    table,
    tr,
    td {
        border: 1px solid #ccc;
        border-collapse: collapse;
    }

    tr {
        height: 36px;
    }

    td {
        min-width: 100px;
        min-height: 30px;
    }

    .mod_table {
        margin-right: 22px;
        margin-top: 20px;
        height: 50px;
    }

    /* 分页 end */
</style>
<style>
    .a-link {
        color: #4074e1;
        text-decoration: underline;
        cursor: pointer;
    }
</style>



<template>
    <div class="policy-manage">
        <product-title></product-title>
        <div class="wraper">
            <div class="pro-con-f common-box-body">
                <Row>
                    <h3 class="search-h3 huang">
                        快速搜索
                    </h3>
                    <Form :model="searchForm" class="search-form">
                        <Col :xs="24" :sm="12" :md="12" :lg="8">
                            <Form-item label="姓名">
                                <Input size="large" type="text" v-model="searchForm.name" placeholder="请输入员工姓名" />
                            </Form-item>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="8">
                            <Form-item label="手机号码">
                                <Input size="large" type="text" v-model="searchForm.mobile" placeholder="请输入员工手机号码" />
                            </Form-item>
                        </Col>       
                        <Col :xs="24" :sm="24" :md="24" :lg="8">
                            <Button size="large" class="fr" type="primary" icon="ios-search" @click="search">搜索</Button>
                        </Col>
                        <div class="clear"></div>
                    </Form>
                </Row>
            </div>
            <div class="detail">
                <div class="clearfix">
                    <div class="table-theme highlight_table">
                        <Table :loading="tableloading" @on-selection-change="selectChange" ref="currentRowTable" @on-current-change="tableCurrentChange($event)" size="large" stripe
                            highlight-row border :columns="columns1" :data="tablelist" class=""></Table>
                    </div>
                </div>
            </div>
        </div>
        <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
            <Row class="pro-pagesize">
                <Col :md="24" :lg="16">
    
                <Button type="info" :disabled="tableaction" @click="tableEdit" size="large"
                    class="fl mr10">参保</Button>
                <!-- <Button type="success" :disabled="tableaction" size="large" class="fl mr10" @click="modalTrue">设置账号</Button> -->
                </Col>
            </Row>
        </div>
        <Modal v-model="showModal" :mask-closable='closeable' width="80%" title="员工详情"  :loading="loading">
            <Table :columns="columns2" :data="logs"></Table>
            <div slot="footer">
            
            </div>
        </Modal>
    </div>
</template>

<script>
    import productTitle from '../../components/productTitle'
    
    import {
        supposedList,
        changeInsureStatus
    } from '../../api/employee'
    import debounce from 'lodash.debounce'
    export default {
        data() {
            return {
                showModal: false, //点击设置,弹出模态框
                loading: true, //模态框家在状态提交确定
                closeable: false,
                // loading: true,
                remoteloading: false,
                page: 1,
                pagesize: 10,
                searchForm: {
                    name: '',
                    mobile: '',
                },
                tableloading: true,
                tableaction: true,
                current: 0,
                currentpage: 1,
                currentRow: {},
                columns1: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '编号',
                        type: 'index',
                        width: '100',
                        align: 'center',
                    },
                    {
                        title: '工号',
                        key: 'job_code',
                        align: 'center',
                    },
                    {
                        title: '姓名',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        title: '性别',
                        key: 'sex',
                        align: 'center',
                        render:(h,params)=>{
                            return h('div',{},params.row.sex == 1 ? '男': '女')
                        }
                    },
                    {
                        title: '手机号',
                        key: 'mobile',
                        align: 'center'
                    },
                    {
                        title: '证件类型',
                        key: 'id_type',
                        align: 'center'
                    },
                    {
                        title: '证件号码',
                        key: 'id_number',
                        align: 'center'
                    },
                    {
                        title: '入司时间',
                        key: 'join_time',
                        align: 'center'
                    },
                    {
                        title: '价值保费（元）',
                        key: 'total_worth_premium',
                        align: 'center',
                        render:(h,params)=>{
                            return h('a',{
                                style:{
                                    textDecoration:'underline',
                                },
                                on:{
                                    click: ()=>{
                                        this.showDetail(params.index)
                                    }
                                }
                            },params.row.total_worth_premium)
                        }
                    }
                ],
                tablelist: [],
                columns2:[
                    {
                        title: '保单号',
                        key: 'policy_num',
                        align: 'center',
                    },
                    {
                        title: '险种名称',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        title: '交费期间',
                        key: 'pay_period',
                        align: 'center',
                    },
                    {
                        title: '规模保费（元）',
                        key: 'premium',
                        align: 'center',
                    },
                    {
                        title: '价值系数（%）',
                        key: 'radio',
                        align: 'center',
                    },
                    {
                        title: '价值保费（元）',
                        key: 'word_premium',
                        align: 'center',
                    },
                    {
                        title: '承保时间',
                        key: 'underwrite_date',
                        align: 'center',
                    },
                ],
                logs:[],
                eids:[]
            }
        },
        components: {
            productTitle
        },
        computed: {
            slidetoggle() {
                return this.$store.state.sildeshow
            },

        },
        watch: {
            eids:{
                handler:function(val,oldval){
                    console.log(val)
                    if(val.length > 0){
                        this.tableaction = false
                    }else{
                        this.tableaction = true
                    }
                }, 
                deep:true    
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            selectChange(selection){
                this.eids = selection
            },
            tableEdit(){
                const _array = this.eids
                const _arry =  _array.map(item=>{
                    return item.id
                })

                let _params = {
                    eids:_arry.join(','),
                    insure_status:1
                }
                changeInsureStatus(_params).then(res=>{
                    console.log(res.data)
                    if(res.data.err == 0){
                        this.$Message.success('操作成功！');
                        this.getList();
                    }
                })
            },
            showDetail(index){
                this.showModal = true;
                this.logs = this.tablelist[index].logs
            },
            tableCurrentChange(currentRow, oldCurrentRow) {
                console.log(currentRow)
                console.log(oldCurrentRow)
                this.currentRow = currentRow
                console.log(this.currentRow)
            },
            // 搜索
            search() {
                this.tableloading = true
                this.getList();
            },
            // 获取员工列表
            getList() {
                this.tableaction = true;
                new Promise((resolve, reject) => {
                    supposedList(this.searchForm).then(response => {
                        if (response.data.err == 0) {
                            this.tablelist = response.data.data;
                            this.tableloading = false
                        } else {
                            this.$Message.error(response.data.info);
                            this.tableloading = false
                        }
                        resolve();
                    }).catch(error => {
                        this.tableloading = false
                        reject(error);
                    });
                });
            },
        }
    }
</script>